<template>
	<div class="bg-white">

		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>教练信息</span>
			</div>
			<div :style="'background-image:url('+jl.cover+');'" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">教练编号</div>
							<div>{{jl.jlid}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-f-fuguang rounded  p-2">
							<div class="text-xs">教练</div>
							<div class="p-2 d-flex">
								<div class="w-25 position-relative">
									<div class="padding-top-100">
									</div>
									<img class="w-100 h-100 position-absolute top0 rounded-circle" :src="jl.cover" />
								</div>
								<div class="w-75">
									<div class="px-3">姓名：{{jl.jlname}}</div>
									<div class="px-3">电话：{{jl.tel}}</div>
									<div class="px-3">评分：{{jl.count}}</div>
								</div>

							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">擅长类型</div>
							<div v-if="formattedLxNames.length" class="cu-tag round light bg-blue text-xs">
								{{ formattedLxNames.join('、') }} <!-- 使用“、”分隔符 -->
							</div>
							<div v-else class="cu-tag round light bg-blue text-gray-400 text-xs">
								暂无擅长类型
							</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-danfen rounded p-2 d-flex justify-content-between">
							<div class="text-xs">押金</div>
							<div>¥{{jl.yj}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded p-2">
							<Carousel loop>
								<CarouselItem v-for="(img, index) in jl.imgs" :key="index">
									<img class="w-100 h-100" :src="img" />
								</CarouselItem>
							</Carousel>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<!-- <div class="bg-danfen rounded p-2 d-flex flex-column">
							<div class="text-xs" style="min-width: 40px; white-space: nowrap;">描述:</div>
							<div class="rich-content" v-html="jl.ms"></div>
						</div> -->
						<div class="bg-qingbai rounded p-2 h-full flex flex-col" style="max-height: 500px">
							<!-- 方案2：自定义精确高度 -->
							<div class="text-xs space-y-2 flex-1 overflow-hidden"> <!-- 直接隐藏溢出内容 -->
								<div class="text-xs text-gray-600">描述：</div>
								<div v-html="jl.ms" class="space-y-2"></div>
							</div>
						</div>

						</Col>
					</Row>
				</div>
			</div>
		</div>

		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>会员类型记录</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(hylx,index) in hylx" :key="index" class="p-1" :xs="24" :sm="24" :md="12" :lg="8"
						:xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>会员类型编号</span>
							<span>{{hylx.hylxid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>会员类型</span>
							<span>{{hylx.hlname}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>周期</span>
							<span>{{hylx.zq}}天</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>金额</span>
							<span>¥{{hylx.amount}}</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>


		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>课程记录</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(akecheng,index) in akecheng" :key="index" class="p-1" :xs="24" :sm="24" :md="12"
						:lg="8" :xl="6" :xxl="4">
					<div :style="'background-image:url('+akecheng.cover+'); background-size: 100% 100%;'"
						class="shadow rounded overflow-hidden">
						<div class="bg-black-50 text-fuguang">
							<div class=" d-flex justify-content-between p-2">
								<div>课程编号</div>
								<span>{{akecheng.kcid}}</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>课程名称</div>
								<span>{{akecheng.kcname}}课</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>最小人数</div>
								<span>{{akecheng.zxrs}}</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>最大人数</div>
								<span>{{akecheng.zdrs}}</span>
							</div>
							<div class="d-flex justify-content-between p-2">
								<div>已报名人数</div>
								<span>{{akecheng.ybrs}}</span>
							</div>
						</div>

					</div>
					</Col>
				</Row>
			</div>
		</div>

		<div>
			<Page class="text-right mt-3" :page-size="pageSize" @on-change="pageSearch" :total="total" />
		</div>

		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>提款记录</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(jltq,index) in ajiaoliantq" :key="index" class="p-1" :xs="24" :sm="24" :md="12" :lg="8"
						:xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>提取记录编号</span>
							<span>{{jltq.tqjlid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>提取时间</span>
							<span>{{formatDate(jltq.ct)}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>实际金额</span>
							<span>{{jltq.sjje}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>提取状态</span>
							<span v-if="jltq.zt == 'R'">已提取</span>
							<span v-if="jltq.zt == 'F'">已到账</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>

		<div>
			<Page class="text-right mt-3" :page-size="pageSize" @on-change="pageSearch1" :total="total" />
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				jl: {},
				hylx: [],

				currentPage: 1,
				pageSize: 10,
				total: 0,
				akecheng: [],

				ajiaoliantq: [],
				lxList: []
			}
		},

		created: function() {
			this.jl.jlid = this.$route.query.id;
			this.loadData();

		},
		mounted: function() {},

		computed: {
			// 生成映射表：{ 1: "舞蹈", 2: "瑜伽", 3: "搏击" }
			lxMap() {
				// 检查 lxList 是否为数组，如果不是则返回空对象
				if (!Array.isArray(this.lxList)) {
					return {};
				}
				return this.lxList.reduce((map, item) => {
					// 确保 item 包含 akclxid 和 lxname 属性
					if (item.akclxid !== undefined && item.lxname !== undefined) {
						map[item.akclxid] = item.lxname;
					}
					return map;
				}, {});
			},
			// 将 jl.lx 转换为名称数组（如 ["舞蹈", "瑜伽"]）
			formattedLxNames() {
				// 检查 jl.lx 是否为数组，如果不是则返回空数组
				if (!Array.isArray(this.jl.lx)) {
					return [];
				}
				return this.jl.lx
					.map((id) => {
						// 去除 ID 字符串两端的空格
						const trimmedId = String(id).trim();
						// 将 ID 字符串转换为数字
						const numericId = parseInt(trimmedId, 10);
						// 检查转换后的 ID 是否为有效数字
						if (!isNaN(numericId)) {
							return this.lxMap[numericId];
						}
						return null;
					})
					.filter((name) => name !== null)
					.map((name) => name || "未知类型");
			}
		},
		methods: {
			loadData: function() {
				return this.http.get({
					url: "/jl/info",
					param: {
						jlid: this.jl.jlid
					}
				}).then(data => {
					this.jl = data.ajiaolian;
					this.hylx = data.ahylxs;
					this.akecheng = data.akechengs;
					this.ajiaoliantq = data.ajiaoliantqs;
					this.lxList = data.lxs;

				});
			},
			formatDate(ct) {
				if (!Array.isArray(ct) || ct.length < 3) return '无效日期';
				const [year, month, day] = ct;
				// 月份减 1 并补零
				const formattedMonth = String(month).padStart(2, '0');
				const formattedDay = String(day).padStart(2, '0');
				return `${year}-${formattedMonth}-${formattedDay}`;
			},

			pageSearch() {
				
			},
			
			pageSearch1() {
				
			},
			

		}

	}
</script>

<style>
</style>